<template>
  <!-- 订单管理 -->
  <div class="classification">
    <div style="margin-top: 20px;margin-bottom: 20px; padding-left: 40px;">
    <el-input class="demo-input-size" placeholder="请输入订单号" 
    style="display: inline; margin-top: 20px;margin-bottom: 20px; padding-right: 20px;"/>
    <el-select v-model="value" placeholder="全部" style="width: 180px;padding-right: 20px;"  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
    <el-button type="success" @click=""><el-icon><HomeFilled /></el-icon>配货完成</el-button>
    <el-button type="success" @click=""><el-icon><HomeFilled /></el-icon>出库</el-button>
    <el-button  type="danger" @click=""> <el-icon><Close /></el-icon>关闭订单</el-button>
  </div>
  <el-divider />
    <!-- 分类界面 -->
  <el-table
    ref="multipleTableRef"
    :data="state.tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="80" />
    <el-table-column label="订单号" width="300">
      <template #default="scope">{{ scope.row.number }}</template>
    </el-table-column>
    <el-table-column property="price" label="订单总价" width="200" />
    <el-table-column property="status" label="订单状态" width="200" />
    <el-table-column property="payment" label="支付方式" width="200" />
    <el-table-column property="time" label="创建时间" show-overflow-tooltip />
    <el-table-column fixed="right" label="操作" width="220" >  
      <template #default>
        <el-button link type="primary" size="small" @click="open">关闭订单</el-button>
        <el-button link type="primary" size="small" @click="">订单详情</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <div class="Pagination">
    <el-pagination background layout="prev, pager, next" :total="15" />
  </div>
  </div>
</template>
<script setup>

import axios from 'axios' 
import { ref,reactive,onMounted } from 'vue'
import { ElMessage, ElMessageBox } from "element-plus";
const value = ref('')
const form = reactive({
  type: [],
  tableData:[]
})
/* 内容定义 */
const state = reactive({
  tableData: [], // 数据列表
})
onMounted(() => {
  getCategory()
})
const getCategory= () => {
  axios.get('http://rap2api.taobao.org/app/mock/308829/api/orders')      
.then((res) => {
console.log(res)
state.tableData = res.data.order
//  console.log(tableData)
})
}

const open = () => {
  ElMessageBox.confirm("你确定要关闭这个商品的订单吗？", "商品订单", {
    confirmButtonText: "关闭",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "关闭成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "关闭失败",
      });
    });
};
 const options = [
  {
    value: '',
    label: '全部',
  },
  {
    value: '0',
    label: '待支付',
  },
  {
    value: '1',
    label: '已支付',
  },
  {
    value: '2',
    label: '配货完成',
  },
  {
    value: '3',
    label: '出库成功',
  },
  {
    value: '4',
    label: '交易成功',
  },{
    value: '-1',
    label: '手动关闭',
  },{
    value: '-2',
    label: '超时关闭',
  },{
    value: '-3',
    label: '商家关闭',
  }
]
</script>

<style lang="less" scoped>
.Pagination{
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
</style>
